<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog" @getContent="getContent" position="index"
			@getPlanListEvent="getPlanListEvent"></custom>
		<view class="main_containers">
			<pageTitle name="演出曲目" :navBarArr="navBarArr"></pageTitle>
			<!-- 折叠内容 -->
			<view class="collapseContainers">
				<l-collapse :accordion="true">
					<l-collapse-item v-for="(items, indexs) in PlanList" :key="indexs" :title="items.day + items.weekDay"
						:open="currIndex==indexs" >
						<view class="collapseContainers_itemContaienrs">
							<view class="collapseContainers_item display_flex0" v-for="(item, index) in items.h5PlanMusicVos" :key="index">
							   <view class="collapseContainers_item_left" :style="{background:indexs%3==0?color0:(indexs%3==1)?color1:color2}">
							   	 {{item.sort}}
							   </view>
							   <view class="collapseContainers_item_right">
							   	 <text class='collapseContainers_item_right_name' :style="{color:indexs%3==0?color0:(indexs%3==1)?color1:color2}">{{item.musicName}}</text>
								 <text class="collapseContainers_item_right_auth">/ {{item.actorName}}</text>
							   </view>
							</view>
						</view>
					
					</l-collapse-item>

				</l-collapse>
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import lCollapse from '@/components/common/l-collapse/l-collapse.vue';
	import lCollapseItem from '@/components/common/l-collapse-item/l-collapse-item.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,
			lCollapse,
			lCollapseItem
		},
		data() {
			return {
				currIndex:0,
				topDailogStatus: false,
				color0:'rgba(234, 11, 42, 1)',
				color1:'rgba(27, 28, 128, 1)',
				color2:'rgba(53, 112, 65, 1)',
				navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "节目单"
					}
				],
				PlanList:[],
				collapseArr: [{
						id: 1,
						title: '8/27(周日) 节目单',
						list: [{
								num: '01',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							},
							{
								num: '02',
								name: '滚！滚！ ',
								auth: 'RO-KYU-BU！'
							},
							{
								num: '03',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							}, { //打他们吧 / 科兹梅兹
								num: '04',
								name: '打他们吧',
								auth: '科兹梅兹'
							}, { //打他们吧 / 科兹梅兹
								num: '05',
								name: '射箭',
								auth: '猫的胡须'
							},
							{
								num: '06',
								name: '咩！！',
								auth: '咩！'
							}
						],
					},
					{
						id: 2,
						title: '8/26(周六) 节目单',
						list: [{
								num: '01',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							},
							{
								num: '02',
								name: '滚！滚！ ',
								auth: 'RO-KYU-BU！'
							},
							{
								num: '03',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							}, { //打他们吧 / 科兹梅兹
								num: '04',
								name: '打他们吧',
								auth: '科兹梅兹'
							}, { //打他们吧 / 科兹梅兹
								num: '05',
								name: '射箭',
								auth: '猫的胡须'
							},
							{
								num: '06',
								name: '咩！！',
								auth: '咩！'
							}
						],
					},
					{
						id: 3,
						title: '8/26(周五) 节目单',
						list: [{
								num: '01',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							},
							{
								num: '02',
								name: '滚！滚！ ',
								auth: 'RO-KYU-BU！'
							},
							{
								num: '03',
								name: 'ROWDIEZ -Rogue Guys Wanted Vibes-',
								auth: 'Rogue Guys'
							}, { //打他们吧 / 科兹梅兹
								num: '04',
								name: '打他们吧',
								auth: '科兹梅兹'
							}, { //打他们吧 / 科兹梅兹
								num: '05',
								name: '射箭',
								auth: '猫的胡须'
							},
							{
								num: '06',
								name: '咩！！',
								auth: '咩！'
							}
						],
					}
				]
			}
		},
		onShow() {

		},
		onLoad(options) {
			let _this = this

		},
		onReady() {



		},
		methods: {
			getPlanListEvent(data) {
				this.PlanList = data
			},
			getContent(data) {
				console.log('演常')
				console.log(data)
				let that = this
			
				this.isrefresh = false
				// 设置一个1000毫秒后执行的定时器
				setTimeout(function() {
					that.isrefresh = true
				}, 1000);
			
			},
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;
		.collapseContainers{
			padding:0 32rpx;
			&_itemContaienrs{
				border-top:1px solid #333;
				padding:24rpx 0rpx;
			}
			&_item{
				background-color: #fff;
				border-bottom: 1px solid #ddd;
				&_left{
					width:52rpx;
					color:#fff;
					text-align: center;
				}
				&_right{
					padding:10rpx;
					width:calc(100% - 52rpx);
					font-size:28rpx;
					color:rgba(51, 51, 51, 1);
					line-height: 40rpx;
					font-weight: 700;
					&_auth{
						margin-left:12rpx;
					}
				}
			}
		}
	}
</style>